<template>
  <div class="app-container">
    <div class="container-module" style="padding-bottom: 0">
      <el-form :inline="true" class="search-form" size="small">
        <el-row style="display: flex; flex-wrap: wrap">
          <div style="flex: 1">
            <el-form-item class="search-form-item" label="收货人电话" style="margin: 5px 0">
              <el-input
                v-model="searchForm.addr_phone_number"
                clearable
                placeholder="请输入收货人电话"
                type="text"
                min="1"
                class="input-with-select"
              />
            </el-form-item>
            <el-form-item class="search-form-item" label="发货状态" style="margin: 5px 0">
              <el-select v-model="searchForm.status" clearable placeholder="请选择发货状态">
                <el-option
                  v-for="item in [
                    { name: '待发货', id: 1 },
                    { name: '待收货', id: 2 },
                    { name: '交易完成', id: 3 },
                  ]"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-if="searchDisplay" class="search-form-item" label="订单流水号" style="margin: 5px 0">
              <el-input
                v-model="searchForm.order_trade_no"
                clearable
                placeholder="请输入订单流水号"
                type="text"
                min="1"
                class="input-with-select"
              />
            </el-form-item>
            <el-form-item v-if="searchDisplay" class="search-form-item" label="支付单号" style="margin: 5px 0">
              <el-input
                v-model="searchForm.pay_order_no"
                clearable
                placeholder="请输入支付单号"
                type="text"
                min="1"
                class="input-with-select"
              />
            </el-form-item>
            <el-form-item v-if="searchDisplay" class="search-form-item" label="商品ID" style="margin: 5px 0">
              <el-input
                v-model="searchForm.supplier_goods_id"
                clearable
                placeholder="请输入商品ID"
                type="text"
                min="1"
                class="input-with-select"
              />
            </el-form-item>
            <el-form-item v-if="searchDisplay" class="search-form-item" label="商品名称" style="margin: 5px 0">
              <el-input
                v-model="searchForm.supplier_goods_name"
                clearable
                placeholder="请输入商品名称"
                type="text"
                min="1"
                class="input-with-select"
              />
            </el-form-item>
            <el-form-item v-if="searchDisplay" class="search-form-item" label="供货商ID" style="margin: 5px 0">
              <el-input
                v-model="searchForm.supplier_id"
                clearable
                placeholder="请输入供货商ID"
                type="text"
                min="1"
                class="input-with-select"
              />
            </el-form-item>

            <el-form-item v-if="searchDisplay" class="search-form-item" label="用户昵称" style="margin: 5px 0">
              <el-input
                v-model="searchForm.user_nickname"
                clearable
                placeholder="请输入用户昵称"
                type="text"
                min="1"
                class="input-with-select"
              />
            </el-form-item>
            <el-form-item v-if="searchDisplay" class="search-form-item" label="用户手机号" style="margin: 5px 0">
              <el-input
                v-model="searchForm.user_mobile"
                clearable
                placeholder="请输入用户手机号"
                type="text"
                min="1"
                class="input-with-select"
              />
            </el-form-item>
            <el-form-item v-if="searchDisplay" class="search-form-item" label="收货人姓名" style="margin: 5px 0">
              <el-input
                v-model="searchForm.addr_recipient"
                clearable
                placeholder="请输入收货人姓名"
                type="text"
                min="1"
                class="input-with-select"
              />
            </el-form-item>

            <el-form-item v-if="searchDisplay" class="search-form-item" label="用户手机号" style="margin: 5px 0">
              <el-input
                v-model="searchForm.user_mobile"
                clearable
                placeholder="请输入用户手机号"
                type="text"
                min="1"
                class="input-with-select"
              />
            </el-form-item>
            <el-form-item v-if="searchDisplay" class="search-form-item" label="收货地址" style="margin: 5px 0">
              <el-input
                v-model="searchForm.addr_details"
                clearable
                placeholder="请输入收货地址"
                type="text"
                min="1"
                class="input-with-select"
              />
            </el-form-item>
            <el-form-item v-if="searchDisplay" class="search-form-item" label="申请起始时间" style="margin: 5px 0">
              <el-date-picker
                v-model="create_time"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                @change="create_timeWay"
              />
            </el-form-item>
            <el-form-item v-if="searchDisplay" class="search-form-item" label="支付起始时间" style="margin: 5px 0">
              <el-date-picker
                v-model="pay_time"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                @change="pay_timeWay"
              />
            </el-form-item>
          </div>
          <div style="padding: 5px 0">
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search" @click="getListWay">查询</el-button>
              <el-button size="small" type="primary" icon="el-icon-refresh" @click="resetting">重置</el-button>
              <el-button
                v-if="!searchDisplay"
                icon="el-icon-caret-bottom"
                size="small"
                @click="searchDisplay = true"
              >展开</el-button>
              <el-button v-else size="small" icon="el-icon-caret-top" @click="searchDisplay = false">收起</el-button>
            </el-form-item>
          </div>
        </el-row>
      </el-form>
    </div>
    <el-divider />

    <div style="padding: 0 20px 20px">
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-button
              icon="el-icon-tickets"
              type="primary"
              :loading="exportLoading"
              @click="exportSupplierListWay"
            >批量导出</el-button>
            <el-button icon="el-icon-truck" type="primary" @click="doOpen">批量发货</el-button>
            <el-button icon="el-icon-position" type="primary" @click="manualDelivery">手动发货</el-button>
          </el-col>
          <el-col :span="4" style="float: right">
            <div class="right-panel el-button-group">
              <el-button class="" icon="el-icon-refresh" size="mini" @click="getListWay" />
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button class="" icon="el-icon-s-operation" size="mini" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                      tableTheadOptions[fruit].label
                    }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col class="new_table_card">
          <el-table
            ref="tablerefs"
            v-loading="loading"
            highlight-current-row
            :data="OrderList"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            style="width: 100%"
            height="100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column key="selection" type="selection" width="55" />
            <el-table-column
              v-for="fruit in tableThead"
              :key="fruit"
              :label="tableTheadOptions[fruit].label"
              :width="
                tableTheadOptions[fruit].width
                  ? tableTheadOptions[fruit].width + 'px'
                  : 'auto'
              "
              align="center"
            >
              <template slot-scope="scope">
                <div
                  v-if="
                    fruit == 'supplier_sku_img' ||
                      fruit == 'supplier_goods_main_image' ||
                      fruit == 'sku_img'
                  "
                  style="
                    width: 30px;
                    height: 30px;
                    border-radius: 5px;
                    overflow: hidden;
                    margin: 0 auto;
                  "
                >
                  <el-image :src="scope.row[fruit]" :preview-src-list="[scope.row[fruit]]" />
                </div>

                <span v-else-if="fruit == 'delivery_address'">
                  {{
                    scope.row.delivery_address
                      ? scope.row.delivery_address.province_name
                      : ""
                  }}
                  {{
                    scope.row.delivery_address
                      ? scope.row.delivery_address.city_name
                      : ""
                  }}
                  {{
                    scope.row.delivery_address
                      ? scope.row.delivery_address.district_name
                      : ""
                  }}
                </span>
                <div v-else-if="fruit == 'delivery'">
                  <el-button
                    v-if="scope.row.delivery_list.length > 0"
                    type="text"
                    @click="drawerHandle(scope.row)"
                  >查看快递信息</el-button>
                  <el-tag v-else type="info"> 无 </el-tag>
                </div>
                <span v-else-if="fruit == 'recipient'">
                  {{
                    scope.row.delivery_address
                      ? scope.row.delivery_address.recipient
                      : ""
                  }}
                </span>
                <span v-else-if="fruit == 'phone_number'">
                  {{
                    scope.row.delivery_address
                      ? scope.row.delivery_address.phone_number
                      : ""
                  }}
                </span>
                <span v-else-if="fruit == 'address_details'">
                  <el-tooltip placement="top-start" :content="scope.row.delivery_address + ''">
                    <div class="one_line_hidden">
                      {{ scope.row.delivery_address ? scope.row.delivery_address.address_details : "-" }}
                    </div>
                  </el-tooltip>

                </span>
                <span v-else>
                  <el-tooltip placement="top-start" :content="scope.row[fruit] + ''">
                    <div class="one_line_hidden">
                      {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                    </div>
                  </el-tooltip>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" fixed="right" width="150" prop="address" label="操作">
              <template slot-scope="scope">
                <!-- v-hasPermi="'orderlist/qfh'" -->
                <el-button
                  v-show="scope.row.status == 1"
                  key="goshipments"
                  type="text"
                  size="mini"
                  @click="editNotesWay(scope.row)"
                >
                  去发货
                </el-button>
                <!--                <el-divider-->
                <!--                  v-if="scope.row.status == 1"-->
                <!--                  direction="vertical"-->
                <!--                />-->
                <el-tag v-show="scope.row.status == 2" key="shipments" type="info">待收货</el-tag>
                <!--                <el-divider-->
                <!--                  v-if="scope.row.status == 2"-->
                <!--                  direction="vertical"-->
                <!--                />-->
                <el-tag v-show="scope.row.status == 3" key="finished" type="success">已完成</el-tag>
                <!--                <el-divider-->
                <!--                  v-if="scope.row.status == 3"-->
                <!--                  direction="vertical"-->
                <!--                />-->
                <el-button key="info" type="text" size="mini" @click="detailsDialogway(scope.row)">
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table></el-col>
      </el-row>
      <el-row style="text-align: right">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="searchForm.page"
          :limit.sync="searchForm.count"
          @pagination="getListWay"
        />
      </el-row>
    </div>

    <!-- 去发货弹框 -->
    <el-drawer
      :show-close="true"
      :modal-append-to-body="false"
      :with-header="false"
      :append-to-body="true"
      title="发货"
      :visible.sync="dialogSendOutGoods"
      size="50%"
      @close="SendOutGoodsClose"
    >
      <div style="position: relative">
        <div class="drawerTitle">
          <span>发货</span>
          <div class="close" @click="SendOutGoodsClose">
            <i class="el-icon-close" style="font-size: 24px;" />
          </div>
        </div>
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 140px)">
        <div class="elivery-list">
          <div class="list-item">
            <div class="left">
              <div class="left-icon">
                <i class="el-icon-shopping-bag-1" />
              </div>
              <div class="list-center">
                <span v-if="shippingDetails.status ? shippingDetails.status == 1 : false" style="color: #bd312b;font-weight: bold">待发货</span>
                <span v-if="shippingDetails.status ? shippingDetails.status == 2 : false" style="color: #bd312b;font-weight: bold">待收货</span>
                <span v-if="shippingDetails.status ? shippingDetails.status == 3 : false" style="color: #bd312b;font-weight: bold">交易完成</span>
                <p>订单编号: <span style="font-weight: bold">{{ shippingDetails.order_trade_no ? shippingDetails.order_trade_no : "-" }}</span> </p>
              </div>
            </div>
          </div>
        </div>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="发货类型" prop="">
            <el-input v-model="tobeshipped" disabled class="input-widht" />
          </el-form-item>
          <el-form-item label="快递名称" prop="express_name">
            <el-input v-model="form.express_name" class="input-widht" maxlength="20" show-word-limit clearable placeholder="请输入快递名称" />
          </el-form-item>
          <el-form-item label="快递单号" prop="express_num">
            <el-input v-model="form.express_num" class="input-widht" clearable maxlength="20" show-word-limit placeholder="请输入快递单号" />
          </el-form-item>
        </el-form>
        </el-scrollbar>
        <el-col :span="24" style="text-align: right; padding-right: 30px;">
        <el-button @click="dialogSendOutGoods = false">取 消</el-button>
        <el-button type="primary" :loading="dialogSendOutGoodsSubmit" @click="submitWay">确 定</el-button>
        </el-col>
      </div>
    </el-drawer>

    <!-- 查看快递信息 -->
    <el-dialog
      :close-on-click-modal="false"
      title="快递信息"
      :visible.sync="dialogdelivery"
      width="700px"
      custom-class="custorm"
    >
      <el-descriptions
        v-for="(item, index) in delivery_list"
        :key="index"
        :style="index !== 0 ? 'margin-top:20px' : ''"
        class="margin-top"
        :title="item.express_name"
        :column="3"
        border
      >
        <el-descriptions-item label="快递">
          {{ item.express_name }}
        </el-descriptions-item>
        <el-descriptions-item label="订单号">
          {{ item.express_num }}
        </el-descriptions-item>
        <el-descriptions-item label="发货时间">
          {{ item.created_at }}
        </el-descriptions-item>
        <el-descriptions-item label="收货人名称">
          {{ item.recipient }}
        </el-descriptions-item>
        <el-descriptions-item label="收货人手机号">
          {{ item.phone_number }}
        </el-descriptions-item>
        <el-descriptions-item label="省市区">
          {{ item.province_name }}
          {{ item.city_name }}
          {{ item.district_name }}
        </el-descriptions-item>
        <el-descriptions-item label="详细地址">
          {{ item.address_details }}
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogdelivery = false">取 消</el-button>
        <el-button type="primary" @click="dialogdelivery = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-drawer
      :modal-append-to-body="false"
      :append-to-body="true"
      title="订单信息"
      size="60%"
      :with-header="false"
      :visible.sync="detaildialog"
      :show-close="true"
      @close="addressClose"
    >
      <div v-loading="detailLoading" style="position: relative">
        <div class="drawerTitle">
          <span>订单信息</span>
          <div class="close" @click="addressClose">
            <i class="el-icon-close" style="font-size: 24px;" />
          </div>
        </div>

        <div class="drawerContent" style="padding: 10px 30px !important;">
          <div class="infoView" style="display: flex;border: none;justify-content: space-between;">
            <div class="ordserstras">
              <div>订单状态：
                <span v-if="detailsObj.status ? detailsObj.status == 1 : false" style="color: #c33b24;font-weight: 550;">待发货</span>
                <span v-if="detailsObj.status ? detailsObj.status == 2 : false" style="color: #c33b24;font-weight: 550;">待收货</span>
                <span v-if="detailsObj.status ? detailsObj.status == 3 : false" style="color: #c33b24;font-weight: 550;">交易完成</span>
              </div>
              <div>订单编号：{{ detailsObj.order_trade_no ? detailsObj.order_trade_no : "-" }}</div>
            </div>
            <div>
              <el-button v-if="detailsObj.status==1" type="primary" @click="editNotesWay(detailsObj)">手动发货</el-button>
            </div>

          </div>
          <div class="tabsView">
            <el-tabs v-model="activeNames">
              <el-tab-pane label="订单详情" name="order_details" />
              <el-tab-pane label="物流信息" name="logistics_information" />
            </el-tabs>
          </div>
          <div v-if="activeNames == 'order_details'">
            <div class="informationTitleView">
              <div class="leftBox">
                <div class="leftborder" />
                <div class="text">收货信息</div>
              </div>
              <div class="right">
                <!-- <el-button v-if="detailsObj.status == 1" style="margin: 5px; color: #fff"
                  type="warning" size="mini" @click="editNotesWay(detailsObj)">
                  <div style="color: #fff">去发货</div>
                </el-button> -->
              </div>
            </div>
            <div style="padding: 0 10px">
              <el-descriptions :column="2">
                <el-descriptions-item
                  label-class-name="descriptionsLabel"
                  content-class-name="descriptionsLabel"
                  label="收货人"
                >
                  {{
                    detailsObj.delivery_address
                      ? detailsObj.delivery_address.recipient
                      : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item
                  label-class-name="descriptionsLabel"
                  content-class-name="descriptionsLabel"
                  label="收货人电话"
                >
                  {{
                    detailsObj.delivery_address
                      ? detailsObj.delivery_address.phone_number
                      : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item
                  label-class-name="descriptionsLabel"
                  content-class-name="descriptionsLabel"
                  label="省市区"
                >
                  {{
                    detailsObj.delivery_address
                      ? detailsObj.delivery_address.district_name
                      : "-"
                  }}
                  {{
                    detailsObj.delivery_address
                      ? detailsObj.delivery_address.city_name
                      : "-"
                  }}
                  {{
                    detailsObj.delivery_address
                      ? detailsObj.delivery_address.province_name
                      : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item
                  label-class-name="descriptionsLabel"
                  content-class-name="descriptionsLabel"
                  label="详细地址"
                >
                  {{
                    detailsObj.delivery_address
                      ? detailsObj.delivery_address.address_details
                      : "-"
                  }}</el-descriptions-item>
              </el-descriptions>
              <!-- <el-descriptions :column="2">
                <el-descriptions-item label-class-name="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="订单状态">
                  <el-tag v-if="detailsObj.status ? detailsObj.status == 1 : false" type="warning">待发货</el-tag>
                  <el-tag v-if="detailsObj.status ? detailsObj.status == 2 : false" type="warning">待收货</el-tag>
                  <el-tag v-if="detailsObj.status ? detailsObj.status == 3 : false"
                    type="success">交易完成</el-tag></el-descriptions-item>
              </el-descriptions> -->
            </div>
            <div class="informationTitleView">
              <div class="leftBox">
                <div class="leftborder" />
                <div class="text">商品信息</div>
              </div>
              <div class="right" />
            </div>
            <div style="padding: 0 10px">
              <el-descriptions :column="2">
                <!-- <el-descriptions-item label-class-name="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="供货商">
                  {{
                    detailsObj.supplier_name ? detailsObj.supplier_name : "-"
                  }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label-class-name="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="供货商ID">
                  {{
                    detailsObj.supplier_id ? detailsObj.supplier_id : "-"
                  }}</el-descriptions-item> -->
                <el-descriptions-item
                  :span="2"
                  label-class-name="descriptionsLabel"
                  content-class-name="descriptionsLabel"
                  label="商品名称"
                >
                  {{
                    detailsObj.supplier_goods_name
                      ? detailsObj.supplier_goods_name
                      : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item
                  label-class-name="descriptionsLabel"
                  content-class-name="descriptionsLabel"
                  label="商品ID"
                >
                  {{
                    detailsObj.supplier_goods_id
                      ? detailsObj.supplier_goods_id
                      : "-"
                  }}</el-descriptions-item>

                <!-- <el-descriptions-item label-class-name="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="规格图片">
                  <div style="width: 40px; height: 40px">
                    <el-image :src="
                        detailsObj.supplier_sku_img
                          ? detailsObj.supplier_sku_img
                          : '-'
                      " :preview-src-list="[
                        detailsObj.supplier_sku_img
                          ? detailsObj.supplier_sku_img
                          : '-',
                      ]" />
                  </div>
                </el-descriptions-item> -->
                <el-descriptions-item
                  label-class-name="descriptionsLabel"
                  content-class-name="descriptionsLabel"
                  label="商品规格"
                >
                  {{
                    detailsObj.supplier_sku_name
                      ? detailsObj.supplier_sku_name
                      : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item
                  label-class-name="descriptionsLabel"
                  content-class-name="descriptionsLabel"
                  label="商品数量"
                >
                  {{
                    detailsObj.buy_number
                      ? detailsObj.buy_number
                      : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item
                  label-class-name="descriptionsLabel"
                  content-class-name="descriptionsLabel"
                  label="商品图片"
                >
                  <div style="width: 40px; height: 40px">
                    <el-image
                      :src="
                        detailsObj.supplier_goods_main_image
                          ? detailsObj.supplier_goods_main_image
                          : '-'
                      "
                      :preview-src-list="[
                        detailsObj.supplier_goods_main_image
                          ? detailsObj.supplier_goods_main_image
                          : '-',
                      ]"
                    />
                  </div>
                </el-descriptions-item>
                <!-- <el-descriptions-item label-class-name="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="规格零售">
                  {{
                    detailsObj.supplier_sku_retail_price
                      ? detailsObj.supplier_sku_retail_price
                      : "-"
                  }}</el-descriptions-item> -->
              </el-descriptions>
            </div>
            <div class="informationTitleView">
              <div class="leftBox">
                <div class="leftborder" />
                <div class="text">订单信息</div>
              </div>
              <div class="right" />
            </div>
            <div style="padding: 0 10px">
              <el-descriptions :column="2">
                <el-descriptions-item
                  label-class-name="descriptionsLabel"
                  content-class-name="descriptionsLabel"
                  label="支付时间"
                >
                  {{
                    detailsObj.created_at ? detailsObj.created_at : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item
                  label-class-name="descriptionsLabel"
                  content-class-name="descriptionsLabel"
                  label="购买数量"
                >
                  {{
                    detailsObj.buy_number ? detailsObj.buy_number : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item
                  label-class-name="descriptionsLabel"
                  content-class-name="descriptionsLabel"
                  label="支付单号"
                >
                  {{
                    detailsObj.pay_order_no ? detailsObj.pay_order_no : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item
                  label-class-name="descriptionsLabel"
                  content-class-name="descriptionsLabel"
                  label="订单流水号"
                >
                  {{
                    detailsObj.order_trade_no ? detailsObj.order_trade_no : "-"
                  }}</el-descriptions-item>

              </el-descriptions>
            </div>
          </div>
          <div v-if="activeNames == 'logistics_information'">
            <div v-if="recordsList.length !== 0">
              <div class="informationTitleView">
                <div class="leftBox">
                  <div class="leftborder" />
                  <div class="text">物流信息</div>
                </div>
                <div class="right" />
              </div>
              <div style="padding: 0 10px">
                <el-descriptions
                  v-for="(item, index) in recordsList"
                  :key="index"
                  :column="2"
                  style="margin-bottom: 10px"
                >
                  <el-descriptions-item label-class-name="descriptionsLabel" content-class-name="descriptionsLabel">
                    <template slot="label"> 发货ID </template>
                    {{ item.delivery_id }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="descriptionsLabel" content-class-name="descriptionsLabel">
                    <template slot="label"> 快递名称 </template>
                    {{ item.express_name }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="descriptionsLabel" content-class-name="descriptionsLabel">
                    <template slot="label"> 快递单号 </template>
                    {{ item.express_num }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="descriptionsLabel" content-class-name="descriptionsLabel">
                    <template slot="label"> 发货状态 </template>
                    {{ item.status }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="descriptionsLabel" content-class-name="descriptionsLabel">
                    <template slot="label"> 发货时间 </template>
                    {{ item.created_at }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="descriptionsLabel" content-class-name="descriptionsLabel">
                    <template slot="label"> 收货人 </template>
                    {{ item.recipient }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="descriptionsLabel" content-class-name="descriptionsLabel">
                    <template slot="label"> 收货人电话 </template>
                    {{ item.phone_number }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="descriptionsLabel" content-class-name="descriptionsLabel">
                    <template slot="label"> 收货人省市区 </template>
                    {{ item.province_name }}
                    {{ item.city_name }}
                    {{ item.district_name }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="descriptionsLabel" content-class-name="descriptionsLabel">
                    <template slot="label"> 收货详细地址 </template>
                    {{ item.address_details }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
            <div v-else>
              <empty height="80vh" title="未查询到物流信息..." />
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <!--    批量发货-->
    <batch-delivery ref="refBatch" />
    <!--    手动发货-->
    <batch-elivery
      ref="refElivery"
      :multiple-selection="multipleSelection"
      @getListWay="getListWay"
      @doClone="doClone"
    />
  </div>
</template>

<script>
import {
  getSupplyOrderList,
  editDelivery,
  getSupplyryList,
  orderGetListExport
} from '@/api/order/index'
import BatchDelivery from './components/batch_delivery.vue'
import BatchElivery from './components/batch_elivery.vue'
const tableTheadOption = {
  created_at: {
    label: '下单时间',
    field: 'created_at',
    width: 140
  },
  pay_time: {
    label: '支付时间',
    field: 'pay_time',
    width: 140
  },
  detail_id: {
    label: '订单id',
    field: 'detail_id'
  },
  supplier_id: {
    label: '供货商ID',
    field: 'supplier_id'
  },
  supplier_name: {
    label: '供货商名称',
    field: 'supplier_name',
    width: 100
  },
  order_trade_no: {
    label: '商品订单号',
    field: 'order_trade_no',
    width: 200
  },
  pay_order_no: {
    label: '支付单号',
    field: 'pay_order_no',
    width: 200
  },
  buy_number: {
    label: '购买数量',
    field: 'buy_number'
  },
  sku_img: {
    label: '规格图',
    field: 'sku_img'
  },
  supplier_goods_id: {
    label: '商品ID',
    field: 'supplier_goods_id'
  },
  supplier_goods_name: {
    label: '商品名称',
    field: 'supplier_goods_name',
    width: 160
  },
  supplier_goods_main_image: {
    label: '商品图片',
    field: 'supplier_goods_main_image'
  },
  supplier_sku_name: {
    label: '规格名称',
    field: 'supplier_sku_name'
  },
  supplier_sku_img: {
    label: '规格图片',
    field: 'supplier_sku_img'
  },
  supplier_sku_unit: {
    label: '单位',
    field: 'supplier_sku_unit'
  },
  supplier_sku_cost_price: {
    label: '成本价',
    field: 'supplier_sku_cost_price'
  },
  supplier_sku_retail_price: {
    label: '零售价',
    field: 'supplier_sku_retail_price'
  },
  delivery_address: {
    label: '收货人省市区',
    field: 'delivery_address',
    width: 180
  },
  addressetail_id: {
    label: '地址ID',
    field: 'delivery_address.detail_id'
  },
  recipient: {
    label: '收货人名称',
    field: 'delivery_address.recipient'
  },
  phone_number: {
    label: '收货人电话',
    field: 'delivery_address.phone_number',
    width: 110
  },
  address_details: {
    label: '详细地址',
    field: 'delivery_address.address_details'
  }
}
const allTableThead = [
  'created_at',
  'pay_time',
  'detail_id',
  'supplier_id',
  'supplier_name',
  'order_trade_no',
  'pay_order_no',
  'buy_number',
  'sku_img',
  'supplier_goods_id',
  'supplier_goods_name',
  'supplier_goods_main_image',
  'supplier_sku_name',
  'supplier_sku_img',
  'supplier_sku_unit',
  'supplier_sku_cost_price',
  'supplier_sku_retail_price',
  'delivery_address',
  'recipient',
  'phone_number',
  'address_details'
]
const defaultTableThead = [
  'created_at',
  'supplier_name',
  'pay_order_no',
  'supplier_goods_name',
  'supplier_goods_main_image',
  'supplier_sku_name',
  'buy_number',
  'supplier_sku_unit',
  'supplier_sku_cost_price',
  'supplier_sku_retail_price',
  'delivery_address',
  'recipient',
  'phone_number',
  'address_details'
]
export default {
  components: {
    BatchDelivery,
    BatchElivery
  },
  data() {
    return {
      tobeshipped:'待发货',
      activeNames: 'order_details',
      // 默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: false,
      exportLoading: false,
      searchDisplay: false,
      searchForm: {
        status: 1, // 订单状态：1=待发货；2=待收货；3=交易完成
        supplier_goods_id: '', // 供货商商品ID检索
        supplier_goods_name: '', // 商品名称检索
        supplier_id: '', // 供货商ID检索
        order_trade_no: '', // 商品订单号检索
        pay_order_no: '', // 根据订单支付单号检索
        user_nickname: '', // 根据用户昵称检索
        user_mobile: '', // 根据用户手机号检索
        addr_recipient: '', // 根据收货人姓名检索
        addr_phone_number: '', // 收货人电话检索
        addr_details: '', // 	根据收货地址检索
        create_time_start: '', // 下单起始时间（例：2023-10-01 12:20）
        create_time_end: '', // 下单截至时间（例：2023-10-02 12:20）
        pay_time_start: '', // 支付起始时间（例：2023-10-01 12:20）
        pay_time_end: '', // 支付成截至时间（例：2023-10-02 12:20）
        count: 20,
        page: 1
      },
      create_time: [],
      pay_time: [],
      OrderList: [],
      total: 0,
      dialogSendOutGoods: false,
      dialogSendOutGoodsSubmit: false,
      form: {
        detail_id: '',
        express_name: '',
        express_num: ''
      },
      rules: {
        express_name: [{
          required: true,
          validator: (rule, value, callback) => {
            const req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g
            if (value == '') {
              return callback(new Error('请输入快递名称'))
            } else {
              if (req.test(value)) {
                return callback(
                  new Error('快递名称格式不正确,不能包含特殊字符')
                )
              }
              callback()
            }
          },
          trigger: 'change'
        }],
        express_num: [{
          required: true,
          validator: (rule, value, callback) => {
            const req = /[^0-9a-zA-Z]/g
            if (value == '') {
              return callback(new Error('请输入快递单号'))
            } else {
              if (req.test(value)) {
                return callback(
                  new Error('快递单号格式不正确,只能包含数字和英文')
                )
              }
              callback()
            }
          },
          trigger: 'change'
        }]
      },
      dialogdelivery: false,
      delivery_list: [],
      detailsObj: {},
      detaildialog: false,
      detailLoading: false,
      recordsList: [], // 发货记录
      multipleSelection: [], // 当前选中的列表-手动发货临时保存
      shippingDetails: {}, // 详情-手动发货
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }
        ]
      }
    }
  },
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      )
      console.log('222222')
      this.tableKey = this.tableKey + 1
      this.$nextTick(() => {
        this.$refs.tablerefs.doLayout()
      })
    }
  },
  created() {
    this.getListWay()
  },
  methods: {
    addressClose() {
      this.detaildialog = false
    },
    getListWay() {
      this.loading = true
      getSupplyOrderList(this.searchForm)
        .then((res) => {
          this.loading = false
          if (res.code !== 200 || res.status !== 1) {
            return this.$messages.error(res.msg)
          }
          this.OrderList = res.data.list
          this.total = res.data.total
        })
        .catch((err) => {
          this.loading = false
          this.$messages.error(err.msg)
        })
    },
    resetting() {
      this.searchForm = {
        status: '', // 订单状态：1=待发货；2=待收货；3=交易完成
        supplier_goods_id: '', // 供货商商品ID检索
        supplier_goods_name: '', // 商品名称检索
        supplier_id: '', // 供货商ID检索
        order_trade_no: '', // 订单流水号检索
        pay_order_no: '', // 根据订单支付单号检索
        user_nickname: '', // 根据用户昵称检索
        user_mobile: '', // 根据用户手机号检索
        addr_recipient: '', // 根据收货人姓名检索
        addr_phone_number: '', // 收货人电话检索
        addr_details: '', // 	根据收货地址检索
        create_time_start: '', // 下单起始时间（例：2023-10-01 12:20）
        create_time_end: '', // 下单截至时间（例：2023-10-02 12:20）
        pay_time_start: '', // 支付起始时间（例：2023-10-01 12:20）
        pay_time_end: '', // 支付成截至时间（例：2023-10-02 12:20）
        count: 10,
        page: 1
      }
      this.getListWay()
    },
    // 打开修改备注的弹框
    editNotesWay(row) {
      this.shippingDetails = row
      this.dialogSendOutGoods = true
      this.$nextTick(() => {
        this.SendOutGoodsClose()
        this.form.detail_id = row.detail_id
      })
    },
    SendOutGoodsClose() {
      this.form = {
        detail_id: '',
        express_name: '',
        express_num: ''
      }
      this.$refs.form.resetFields()
    },
    submitWay() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.dialogSendOutGoodsSubmit = true
          editDelivery(this.form)
            .then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                return this.$messages.error(res.msg)
              }
              this.SendOutGoodsClose()
              this.dialogSendOutGoods = false
              this.detaildialog = false
              this.dialogSendOutGoodsSubmit = false
              this.$messages.success(res.msg)
              // this.detailsDialogway(this.form)
              this.getListWay()
            })
            .catch((err) => {
              this.dialogSendOutGoodsSubmit = false
              this.$messages.error(err.msg)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    drawerHandle(row) {
      this.delivery_list = row.delivery_list
      this.dialogdelivery = true
    },
    // pathWay() {
    //   this.$router.push('/supplier/orderlist/supplierafter')
    // },
    create_timeWay(vla) {
      this.searchForm.create_time_start = vla[0]
      this.searchForm.create_time_end = vla[1]
    },
    pay_timeWay(vla) {
      this.searchForm.pay_time_start = vla[0]
      this.searchForm.pay_time_end = vla[1]
    },
    detailsDialogway(row) {
      this.detaildialog = true
      this.detailLoading = true
      getSupplyryList({
        detail_id: row.detail_id
      }).then((res) => {
        this.detailsObj = JSON.parse(JSON.stringify(row))
        if (res.code !== 200 || res.status !== 1) {
          this.detailLoading = false
          return this.$messages.error(res.msg)
        }
        this.recordsList = res.data
        this.detailLoading = false
      })
    },
    doOpen() {
      this.$refs.refBatch.open()
    },
    manualDelivery() {
      if (this.searchForm.status != 1) {
        return this.$messages.error('请选择待发货订单进行导出')
      }
      if (!this.multipleSelection.length) {
        return this.$messages.error('必须选择一条订单')
      }
      this.$refs.refElivery.open()
    },

    // 列表选中
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    doClone(row) {
      this.multipleSelection = this.multipleSelection.filter(item => item.detail_id !== row.detail_id)
      this.OrderList.forEach(item => {
        if (item.detail_id === row.detail_id) {
          this.$refs.tablerefs.toggleRowSelection(item, false)
        }
      })
    },
    exportSupplierListWay() {
      if (this.searchForm.status !== 1) {
        return this.$messages.error('只能导出待发货订单')
      }
      if (this.OrderList.length > 100) {
        return this.$messages.error('最大不可超过100条')
      }
      this.exportLoading = true
      const form = {
        ...this.searchForm,
        pageSize: this.searchForm.count
      }
      orderGetListExport(form).then(res => {
        if (res.code === 200) {
          window.location.href = res.data.url
          this.$messages.success('导出成功')
        }else{

          this.$messages.info(res.msg)
        }
        this.exportLoading = false
      }).catch(() => {
        this.exportLoading = false
      })
    }
  }
}
</script>

<style lang="scss">
  .labelView {
    width: 150px;
  }
  .ordserstras{
    font-size: 14px;
    font-weight: 500;
    color: #383838;
    div{
      height: 30px;
    }
  }

  .elivery-list{
    width: 96%;
    padding: 20px 20px 20px 30px;
    .list-item{
      height: 55px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      .left{
        display: flex;
        align-items: center;
        .left-icon{
          position: relative;
          width: 50px;
          height: 55px;
          margin-right: 10px;
          background-color: #1890ff;
          border-radius: 10px;
          .el-icon-shopping-bag-1{
            position: absolute;
            top: 50%;
            left: 50%;
            color: #FFFFFF;
            font-size:30px;
            transform: translate(-50%,-50%);
          }
        }
        .list-center{
          font-size: 14px;
          color: #303030;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 50px;
        }
      }
    }
  }
  .input-widht{
    width: 300px;
  }
</style>
